<template lang="html">
    <div class="">
        <ul
          v-infinite-scroll="loadMore"
          infinite-scroll-disabled="true"
          infinite-scroll-distance="10">
          <li v-for="item in list">{{ item }}</li>
        </ul>
        <div class="" v-if="!isShow">
            加载中
        </div>
    </div>
</template>

<script>
export default {
	data() {
		return {
			isShow: true,
			list: [
				1, 2, 3, 4, 5, 6, 7, 8, 9, 10
			],
			totalList: [
				1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35
			],
			temp: null,
			canScroll: true
		}
	},
	methods: {
		loadMore() {
			if (!this.canScroll) {
				clearTimeout(timeOut);
				this.isShow = true;
				var timeOut = setTimeout(() => {
					this.isShow = false;
				}, 1000);
				return;
			}
			this.loading = true;
			this.isShow = true;
			setTimeout(() => {
				let last = this.list.length;
				this.temp = this.totalList.splice(last, 10);
				for (var i = 0; i < this.temp.length; i++) {
					this.list.push(this.temp[i]);
				}
				if (this.temp.length == 10) {
					this.temp = [];
				} else {
					this.canScroll = false;
				}
				this.loading = false;
				this.isShow = false;
			}, 2500);
		}
	}
}
</script>

<style lang="css">
</style>
